<script lang="ts" setup>
const emit = defineEmits(["update:curMon"]);
const props = defineProps({
  curMon: {
    type: [Number, String],
    default: ""
  }
});
const curMon = toRef(props, "curMon");
// const monthList = [
//   "January",
//   "February",
//   "March",
//   "April",
//   "May",
//   "June",
//   "July",
//   "August",
//   "September",
//   "October",
//   "November",
//   "December"
// ];

const monthList = Array.from(Array(12).keys()).map(i => i + 1);

const show = ref(false);
function handleClick(it: string | number, idx: number) {
  show.value = false;
  // curMon.value = it;
  emit("update:curMon", it, idx);
}
function toggleShow() {
  show.value = !show.value;
}

defineExpose({
  toggleShow
});
</script>
<template>
  <div>
    <div v-if="show" class="absolute top-27 left-0 w-full">
      <ul
        class="h-180 overflow-y-scroll shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)]"
      >
        <li
          class="h-40 flex justify-start items-center pl-20 bg-[#fff] b-b-1 b-b-solid b-b-[#e5e5e5] last-of-type:b-b-none"
          v-for="(it, idx) in monthList"
          :key="idx"
          @click.stop="handleClick(it, idx)"
        >
          <span>{{ it }}</span>
        </li>
      </ul>
    </div>
    {{ curMon }}
  </div>
</template>
